<template>
    <div class="sign-in-detail">
        <el-row type="flex" justify="space-between" class="detail-header">
            <el-col :span="8">
                <label class="header-label">场景功能：</label>
                <span class="header-name">智汇签到</span>
            </el-col>
            <el-col :span="16" style="text-align:right;">
                <label class="header-label">场景页名称：</label>
                <el-input
                    style="width: 260px"
                    placeholder="签到"
                    v-model="pageData.pageName"
                    clearable
                ></el-input>
                <el-button type="primary" @click.stop="updatePageName">修改</el-button>
            </el-col>
        </el-row>

        <el-form class="detail-content" :model="pageData" label-width="120px">
          <backgComponent @change="bgChange" :bgdata="pageData.d3Config">
             <el-button slot="right" style="margin-left:10px" type="danger" @click="goTpshow">高级编辑</el-button>
          </backgComponent>
            <!-- <el-form-item label="大屏背景图片：">
                <el-row class="vertical-top">
                    <div class="img-container">
                        <img class="bg-img" :src="pageData.bgImage" />
                        <span v-if="!pageData.bgImage">未设置背景</span>
                    </div>
                    <el-button type="text" @click="picLibraryVisibly = true">图片库</el-button>
                    <el-button type="text" @click="clearBg">清除</el-button>
                    <el-button type="danger" @click="goTpshow">高级编辑</el-button>
                </el-row>
                <div class="detail-tip">如果为空，则默认显示整体设置中的背景图片</div>
            </el-form-item> -->
            <!-- <el-form-item label="大屏特效：">
                <el-row>
                    <span class="effect-name">{{pageData.screenEffect.name || '特效名称'}}</span>
                    <el-button type="text" @click="sfxLibraryVisibly = true">特效库</el-button>
                    <el-button type="text">清除</el-button>
                </el-row>
                <div class="detail-tip">如果为空，则默认显示整体设置中的特效</div>
            </el-form-item> -->
            <el-form-item label="上屏效果：" class="effect-form-item">
                <div class="effect-list">
                    <div class="effect-item effect-item-effect" v-for="(effect, index) in effectList" :key="index">
                        <el-radio
                            :label="effect.value"
                            v-model="pageData.effect.type"
                        >{{effect.name}}</el-radio>
                        <div class="effect-preview">
                          <img v-if="effect.preview" :src="effect.preview" alt="">
                        </div>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="头像风格：">
                <div class="effect-list">
                    <div class="effect-item" v-for="(effect, index) in AvatarTypeList" :key="index">
                        <el-radio
                            :label="effect.value"
                            v-model="pageData.effect.AvatarType"
                        >{{effect.name}}</el-radio>
                    </div>
                </div>
            </el-form-item>

            <div class="effect-setting" v-if="false">
                <el-form-item label="人数不足时：" v-if="showPlaceholder">
                    <el-radio :label="1" v-model="pageData.placeholderAvatarType">空白头像</el-radio>
                    <el-radio :label="2" v-model="pageData.placeholderAvatarType">重复已签到观众头像</el-radio>
                    <el-button type="text" size="medium">帮助</el-button>
                </el-form-item>
                <el-form-item label="空白头像风格：">
                    <el-radio-group v-model="pageData.placeholderAvatarStyle">
                        <el-radio :label="1" class="placeholder-radio">
                            <span class="placeholder-avatar el-icon-user-solid"></span>
                        </el-radio>
                        <el-radio :label="2" class="placeholder-radio">
                            <span class="placeholder-avatar el-icon-user-solid"></span>
                        </el-radio>
                        <el-radio :label="3" class="placeholder-radio">
                            <span class="placeholder-avatar el-icon-user-solid"></span>
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="头像大小：">
                    <el-slider v-model="pageData.placeholderAvatarSize" :min="20" :max="50"></el-slider>
                    <span class="slider-tip">头像大则显示用户少，头像小则显示的用户多</span>
                </el-form-item>
            </div>
        </el-form>
        <footerButtons @save="saveData" @cancel="">
         
          <!-- <div class="detail-footer">
              <el-button round type="danger">取消</el-button>
              <el-button round type="primary" @click="saveData()">保存</el-button>
          </div> -->
        </footerButtons>
        
        <el-dialog
            top="40px"
            :visible="picLibraryVisibly"
            width="800px"
            title="图片库"
            @close="picLibraryVisibly = false"
            append-to-body
            custom-class="library_dialog definedModal"
        >
            <imagesLibrary @selected="selectCurrentImg" @close="picLibraryVisibly = false"></imagesLibrary>
        </el-dialog>
        <el-dialog
            top="40px"
            :visible="sfxLibraryVisibly"
            width="660px"
            title="特效库"
            @close="sfxLibraryVisibly = false"
            append-to-body
            custom-class="definedModal"
        >
            <specialLibrary @selected="selectCurrentSpx" @close="sfxLibraryVisibly = false"></specialLibrary>
        </el-dialog>
    </div>
</template>

<script>
import table from '../../../../assets/imgs/effects/table.gif';
import sphere from '../../../../assets/imgs/effects/sphere.gif';
import helix from '../../../../assets/imgs/effects/helix.gif';
import grid from '../../../../assets/imgs/effects/grid.gif';
import dna from '../../../../assets/imgs/effects/dna.gif';
// import defaultBg from '../../../../assets/imgs/bg_2.png';
import imagesLibrary from '../baseSetting/library/imagesLibrary';
import specialLibrary from '../baseSetting/library/specialLibrary';
import backgComponent from "@/pages/common/bgComponent"

import { configMerge } from '@/utils/pageConfig';
import { generateNumberID } from '@/utils/util';
export default {
    name: 'signInDetail',
    components: {
        imagesLibrary,
        specialLibrary,
        backgComponent
    },
    data() {
        return {
            // defaultBg: '',
            pageData: {
                pageName: '',
                bgImage: '',
                d3Config:"",
                screenEffect: {
                    name: '',
                },
                // 上屏效果
                effect: {
                    type: 'table',
                    AvatarType:"radius"
                },
                placeholderAvatarType: 1,
                placeholderAvatarStyle: 1,
                placeholderAvatarSize: 30,
            },
            pageDefaultData:{
              css:{
                zIndex:1,
                width:"100%",
                height:"100%"
              },
              "properties":{},
            },
            effectList: [
                { name: '3D表格', value: 'table',preview: table},
                { name: '3D球体', value: 'sphere',preview:sphere },
                { name: '3D螺旋', value: 'helix',preview:helix},
                { name: '3D栅格', value: 'grid' ,preview:grid},
                { name: 'DNA螺旋', value: 'dna',preview:dna },
                { name: '3D形状随机', value: 'random',},
            ],
            AvatarTypeList:[
               { name: '圆角', value: 'radius' },
               { name: '圆形', value: 'circle' },
               { name: '方形', value: 'square' },
            ],
            pageId: null,
            picLibraryVisibly: false,
            sfxLibraryVisibly: false,
            bgComponent: {},
            signComponent: {},
            bgComponentId: '', //背景元素组件的id
            signComponentId: '', //签到组件的id
            sceneSetting:{},        // 当前场景的配置
        };
    },

    computed: {
        showPlaceholder() {
          return false
            // let type = this.pageData.effect.type;
            // return (
            //     type === 2 ||
            //     type === 3 ||
            //     type === 4 ||
            //     type === 5 ||
            //     type === 6
            // );
        },
    },

    created() {
        let {path} = this.$route;

        if ((path + '').indexOf('add') < 0) {
            this.pageId = this.$route.path.split('/')[2].split('_')[0];
            this.getSetting();
            console.log('create');
        }else{
          // 获取默认配置
        }
    },

    methods: {
        bgChange(data,url){
            this.pageData.d3Config = data;
            this.pageData.bgImage = url;
        },
        goTpshow() {
            const { name } = this.$route;
            if ((name + '').indexOf('add') != -1) {
                this.$confirm('当前场景页还未保存,请先保存。', {
                    confirmButtonText: '保存',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(_ => {
                    this.saveData();
                }).catch(_ =>{

                });
            }else{
                this.saveData("goTpshow")
            }
        },
        // 图片库选择结果
        selectCurrentImg(data) {
            this.pageData.bgImage = data.url;
        },
        // 特效库选择结果
        selectCurrentSpx(data) {},
        clearBg() {
            this.pageData.bgImage = '';
        },

        saveData(from) {
            if (!this.pageData.pageName) {
                return this.$message({
                    message: '场景页名称不能为空',
                    type: 'warning',
                });
            }
            let signElement = {
                sceneId: this.$route.query.sceneId,
                pageId: this.pageId,
                id: this.signComponentId || generateNumberID(), //每一个element都有一个id
                type: 'sign', // 类型为sign,代表签到组件

                effect: this.pageData.effect, // 上屏效果
                placeholderAvatarType: this.pageData.placeholderAvatarType, // 人数不足显示 1-空白头像 2-重复已签到头像
                placeholderAvatarStyle: this.pageData.placeholderAvatarStyle, // 空白头像风格
                placeholderAvatarSize: this.pageData.placeholderAvatarSize, // 空白头像大小 单位px
            };

            // 构造数据  初次保存的时候使用默认的样式，
            let elements = [
                configMerge(_.extend({}, (this.signComponentId ? this.signComponent : this.pageDefaultData), signElement))
            ];
            // 判断是否选择了背景图,选择了背景图则在elements中添加背景组件
            if (this.pageData.bgImage) {
                var bgConfig = {
                    sceneId: this.$route.query.sceneId,
                    pageId: this.pageId,
                    id: this.bgComponentId || generateNumberID(),
                    type: '3',
                    properties: {
                        imgSrc: this.pageData.bgImage,
                        d3Config:this.pageData.d3Config
                    },
                };
                elements.push(
                    configMerge(_.extend({}, this.bgComponent, bgConfig))
                );
            }
            let param = {
                sceneId: this.$route.query.sceneId,
                name: this.pageData.pageName,
                num: this.pageData.num || 1,
                elements: elements,
                pageType: 2,
                pageidBigint: this.pageId,
                screenEffect: this.pageData.screenEffect,
            };

            console.log(param);
            this.$api.post(
                '/stScenepage/savePage',
                param,
                response => {
                    let pageId = response;
                    // this.$route.query.pageId = pageId;
                    this.$bus.$emit('menuRefresh', this.$route.path, pageId);
                    this.$message({
                        message: '设置成功',
                        type: 'success',
                    });
                    // 点击高级编辑，先保存当前设置，然后跳转到编辑器
                    if (from === 'goTpshow') {
                        var {origin} = window.location;
                        if(origin.indexOf("localhost") > -1){
                          origin = "http://127.0.0.1:8088"
                        }
                        
                        this.$nextTick(() => {
                            let token = sessionStorage.getItem('token');
                            var url = `${ origin }/staticft/#/scene/create/${
                                this.$route.query.sceneId
                            }?pageId=${this.pageData.num || 1}&type=smartscreen&token=${token}`;
                            window.location.replace(url);
                        });
                    }
                },
                fal => {
                    this.$message.error(fal);
                }
            );
        },

        getSetting() {
            this.$api.post(
                '/stScenepage/scenePageView',
                {
                    sceneId: this.$route.query.sceneId,
                    pageidBigint: this.pageId,
                    // pageidBigint: 36201
                },
                response => {
                    console.log(response);
                    this.sceneSetting = response.scene;
                    let bgComponent = (this.bgComponent = response.elements.filter(
                            item => {
                                return item.type === '3';
                            }
                        )[0]),
                        signComponent = (this.signComponent = response.elements.filter(
                            item => {
                                return item.type === 'sign';
                            }
                        )[0]);
                    this.bgComponentId = bgComponent && bgComponent.id;
                    this.signComponentId = signComponent && signComponent.id;
                   
                    if(signComponent){
                        this.pageData = {
                          effect: signComponent.effect || {}, // 上屏效果
                          placeholderAvatarType:
                              signComponent.placeholderAvatarType,
                          placeholderAvatarStyle:
                              signComponent.placeholderAvatarStyle,
                          placeholderAvatarSize:
                              signComponent.placeholderAvatarSize,
                        };
                    }
                    if(bgComponent){
                      this.pageData.bgImage = bgComponent.properties.imgSrc;
                      this.pageData.d3Config = bgComponent.properties.d3Config;
                    }
                    this.pageData.pageName = response.name;
                    this.pageData.num = response.num;
                    this.pageData.screenEffect = response.screenEffect || {};
                    this.pageData = Object.assign({},this.pageData);
                },
                fal => {
                    this.$message.error(fal);
                }
            );
        },

        updatePageName() {
            if (!this.pageData.pageName) {
                return this.$message({
                    message: '场景页名称不能为空',
                    type: 'warning',
                });
            }
            this.$api.post(
                '/cjScenepage/savePageName',
                {
                    id: this.pageId,
                    name: this.pageData.pageName
                },
                response => {
                    this.$bus.$emit('menuRefresh', this.$route.path, pageId);
                    this.$message({
                        message: '修改成功',
                        type: 'success',
                    });
                },
                fal => {
                    this.$message.error(fal);
                }
            );
        }
    },
};
</script>

<style lang="scss">
.sign-in-detail {
    @include main-content;
    // width: 100%;
    // height: 100%;
    padding-bottom: 50px;
    padding-right: 50px;
    // overflow: auto;

    .el-button--text {
        padding-left: 20px;
        padding-right: 20px;

        &:hover span {
            text-decoration: underline;
        }
    }

    .detail-header {
        padding-bottom: 20px;
        border-bottom: 1px solid #eee;
    }

    .header-label {
        font-weight: normal;
        font-size: 14px;
        margin-right: 10px;
    }

    .header-name {
        font-size: 24px;
    }

    .detail-content {
        margin: 30px 0;

        .img-container {
            width: 160px;
            min-height: 80px;
            border: 1px solid #eee;
            display: inline-flex;
            justify-content: center;
            align-items: center;

            .bg-img {
                max-width: 160px;
            }

            span {
                color: #afafaf;
            }
        }

        .vertical-top {
            button {
                vertical-align: top;
            }
        }

        .detail-tip {
            font-size: 12px;
            color: #afafaf;
        }

        .effect-name {
            color: #373737;
        }

        .effect-form-item {
            .el-form-item__label {
                line-height: 77px;
            }
        }

        .effect-list {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            .effect-item-effect{
               display: flex;
                align-items: center;
            }
            .effect-item {
                margin-right: 60px;
                margin-bottom: 30px;
               
                .el-radio {
                    width: 100px;
                    margin-right: 10px;
                }
                .effect-preview {
                    display: inline-flex;
                    width: 120px;
                    height: 80px;
                    border: 1px solid #ccc;
                    border-radius: 4px;
                    img{
                      width: 100%;
                      height: 100%;
                    }
                }
            }
        }

        .effect-setting {
            border: 2px solid;
            padding-top: 15px;

            .placeholder-radio {
                .el-radio__input {
                    line-height: 32px;
                }

                .el-radio__label {
                    line-height: 30px;
                    padding: 0;
                    margin-left: 10px;
                    border: 1px solid;
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    text-align: center;
                }
            }

            .el-slider {
                width: 500px;
            }
        }
    }
    .detail-footer {
        // margin-top: 20px;
        text-align: right;
    }

    .slider-tip {
        font-size: 12px;
        color: #afafaf;
    }
}
</style>